<template>
	<div class="main">
		<!--上方搜索框-->
		<div class="div-head">
			<div class="div-head-content">
				<div class="div-head-logo">
					<!-- logo图片 -->
					<div class="log">
						<img src="../../assets/logo.png" height="100px" width="100px">
					</div>
				</div>
				<div class="div-head-search">
					<!-- 搜索框 点击搜索跳转到食品分类并搜索-->
					<div>
						<el-input v-model="searchvalue" placeholder="请输入内容" class="input-with-select">
							<el-button slot="append" icon="el-icon-search" @click="searchbyname"></el-button>
						</el-input>
					</div>
					<div class="hot-search">
						<span>热门搜索：</span>
						<span @click="foodClick(30)">冷吃兔</span>
						<span @click="foodClick(31)">水煮肉片</span>
					</div>
				</div>
			</div>
		</div>
		<div class="main-content">
			<!--中部主要显示-->
			<div class="div-body">
				<!--左分类-->
				<div class="category-list">
					<el-menu active-text-color="#606266" text-color="#606266" background-color="#fdf4f4">
						<div class="category-list-first">
							<el-menu-item index="0">热门分类</el-menu-item>
						</div>
						<div v-for="kind in foodkindlist" :key="kind.food_kind_id">
							<el-menu-item v-if="kind.food_kind_id<=7" :index="kind.key" @click="searchbykind(kind.food_kind_id)">{{kind.food_kind_name}}</el-menu-item>
						</div>
						<div class="category-list-all">
							<el-menu-item index="all" @click="searchallfood">查看全部</el-menu-item>
						</div>
					</el-menu>
				</div>
				<!--右-->
				<div style="display: flex">
					<!--轮播图和底下图片-->
					<div class="main-content-show">
						<div class="main-content-carousel">
							<el-carousel trigger="click" height="300px" indicator-position="outside">
								<el-carousel-item v-for="item in items" :key="item">
									<img :src="item" height="300px" width="740px">
								</el-carousel-item>
							</el-carousel>
						</div>
						<div class="main-content-exhibition">
							<div class="main-content-exhibition-item" @click="foodClick(43)">
								<div class="main-content-exhibition-item-1">
									<div class="main-content-exhibition-item-1-1">新品上架</div>
									<div class="main-content-exhibition-item-1-2">炸奶油</div>
									<div class="main-content-exhibition-item-1-3"><span style="margin-left: 5px">点击查看 ></span></div>
								</div>
								<div class="main-content-exhibition-item-2">
									<img src="http://localhost:8080/res/炸奶油.jpg" height="80%" width="80%">
								</div>
							</div>
							<div class="main-content-exhibition-item" @click="foodClick(45)">
								<div class="main-content-exhibition-item-1">
									<div class="main-content-exhibition-item-1-1">新品上架</div>
									<div class="main-content-exhibition-item-1-2">东坡肉</div>
									<div class="main-content-exhibition-item-1-3"><span style="margin-left: 5px">点击查看 ></span></div>
								</div>
								<div class="main-content-exhibition-item-2">
									<img src="http://localhost:8080/res/东坡肉.jpg" height="80%" width="80%">
								</div>
							</div>
						</div>
					</div>
					<!-- 公告 -->
					<div class="home_main_notice">
						<div class="main-content-announce">
							<div class="main-content-announce-imgdiv">
								<img :src="`http://localhost:8080/res/${this.announceImg}`">
							</div>
							<div class="hr">
								<!-- 横线上下各10 -->
							</div>
							<div class="announce_title_div">公告 :</div>
							<div class="announcediv" v-text="announce"></div>
							<div class="announce_bottom"><a href="https://www.12377.cn/">网上有害信息举报专区 ></a></div>
						</div>
						<div class="main-content-link">
							<div class="mcl_link">
								<!-- <el-avatar shape="square" :size="100" :src="url"></el-avatar> -->
								<div style="cursor: pointer;" id="qrcode"></div>
							</div>
							<div class="mcl_title">微信小程序</div>
							<div class="mcl_subs">更多精彩 敬请期待</div>
							<!--小程序链接-->
						</div>
					</div>
				</div>
			</div>
			<!--下方推荐-->
			<div class="main-content-nav-container">
				<div class="title">猜你喜欢</div>
			</div>
			<div class="main-content-foods-container">
				<div class="food" v-for="food of foodlist">
					<div @click="foodClick(food.food_id)" class="imgdiv">
						<!-- 图片240*240 -->
						<img :src="`http://localhost:8080/res/${food.food_img}`">
					</div>
					<div class="hr">
						<!-- 横线上下各10 -->
					</div>
					<div class="namediv" v-text="food.food_name">
						<!-- 菜品名称 -->
					</div>
					<div class="paydiv">
						<div class="price-box">
							<!--
							<span>价格 : </span>-->
							<i class="iconfont">&#xe637; </i>
							<span class="numfont"> {{food.food_price}}</span>

						</div>
						<!--购物车图标-->
						<div>

							<i class="iconfont icongouwu1" style="font-size: 25px;" @click="carClick(food.food_id,food.food_name,food.food_price)">


							</i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="hr"></div>
		<div class="footer"></div>
		<!--加入购物车弹窗-->
		<el-dialog title="加入购物车" :visible.sync="dialogFormVisible" width="600px" center>
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item>
					{{form.clickfoodname}}
				</el-form-item>
				<el-form-item style="margin-top: 20px" label="辣度" prop="label">
					<el-radio-group v-model="form.radio1" size="medium">
						<el-radio-button label="微辣"></el-radio-button>
						<el-radio-button label="特辣"></el-radio-button>
						<el-radio-button label="不辣"></el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item style="margin-top: 20px" label="甜度" prop="label">
					<el-radio-group v-model="form.radio2" size="medium">
						<el-radio-button label="多糖"></el-radio-button>
						<el-radio-button label="少糖"></el-radio-button>
						<el-radio-button label="正常"></el-radio-button>
					</el-radio-group>
				</el-form-item>

				<!--添加数量-->
				<el-form-item label="数量">
					<el-input-number v-model="form.num" :min="1" :max="10" label="数量">
					</el-input-number>
				</el-form-item>
			</el-form>

			<!--添加和取消按钮-->
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addfood">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//import categoryList from "@/components/CategoryList/CategoryList.vue";
	import CategoryListService from "../../components/CategoryList/CategoryListService";
	import HomeService from "./HomeService";
	import FoodCategoryService from "../FoodCategory/FoodCategoryService";
	import QRCode from "qrcodejs2"
	export default {
		name: "Home",
		data() {
			return {
				url: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', //测试图片
				searchvalue: '',
				items: [
					require('../../assets/carousel/item1.png'),
					require('../../assets/carousel/item2.png'),
					require('../../assets/carousel/item3.png'),
					require('../../assets/carousel/item4.jpg'),
				],
				announce: '',
				announceImg: '',
				foodid: '',
				foodlist: [{
						food_id: 1,
						food_img: '虾皮萝卜丝汤.jpg',
						food_name: '虾皮萝卜丝汤',
						food_price: '13.00'
					},
					{
						food_id: 2,
						food_img: '梅子茶泡饭.jpg',
						food_name: '梅子茶泡饭',
						food_price: '25.00'
					},
					{
						food_id: 4,
						food_img: '蓝莓冰淇淋.jpg',
						food_name: '蓝莓冰淇淋',
						food_price: '15.00'
					},
					{
						food_id: 6,
						food_img: '草莓冰淇淋.jpg',
						food_name: '草莓冰淇淋',
						food_price: '15.00'
					},
					{
						food_id: 12,
						food_img: '冰爽柠檬汁.jpg',
						food_name: '冰爽柠檬汁',
						food_price: '8.00'
					},
					{
						food_id: 14,
						food_img: '果粒橙.jpg',
						food_name: '果粒橙',
						food_price: '5.00'
					},
					{
						food_id: 16,
						food_img: '苹果橙汁.jpg',
						food_name: '苹果橙汁',
						food_price: '10.00'
					},
					{
						food_id: 20,
						food_img: '香辣牛肉面.jpg',
						food_name: '香辣牛肉面',
						food_price: '17.00'
					},
					{
						food_id: 21,
						food_img: '重庆小面.jpg',
						food_name: '重庆小面',
						food_price: '17.00'
					},
					{
						food_id: 22,
						food_img: '白蛤蒸蛋.jpg',
						food_name: '白蛤蒸蛋',
						food_price: '25.00'
					},
					{
						food_id: 23,
						food_img: '酸菜鱼.jpg',
						food_name: '酸菜鱼',
						food_price: '30.00'
					},
					{
						food_id: 25,
						food_img: '碳烤生蚝.jpg',
						food_name: '碳烤生蚝',
						food_price: '45.00'
					},
				],
				food: {
					food_id: 110,
					food_img: 'http://img.juimg.com/tuku/yulantu/140816/330652-140Q6101P523.jpg',
					food_name: '小蛋糕',
					food_price: '20'
				},
				foodkindlist: {

				},
				//加入购物车弹框控制

				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					clickfoodname: '',
					clickfoodid: '',
					clickfooodprice: '',
					radio1: '不辣',
					radio2: '正常',
					num: 1
				},

				formLabelWidth: '120px'
			}
		},
		created() {
			HomeService.shownotice({
		
			}, r => {
				this.announce = r.data.notice_content;
				this.announceImg = r.data.notice_img;
			});
			CategoryListService.categoryService({
		
			}, r => {
				this.foodkindlist = r.data.foodkindList;
			});
			this.qrcode();
		},
		methods: {
			searchbyname() {
				this.$router.push({
					name: 'FoodCategory',
					params: {
						searchmethod: 'byname',
						value: this.searchvalue
					}
				});
			},
			searchbykind(kindid) {
				this.$router.push({
					name: 'FoodCategory',
					params: {
						searchmethod: 'bykind',
						value: kindid
					}
				});
			},
			searchallfood() {
				this.$router.push({
					name: 'FoodCategory',
					params: {

					}
				});
			},
			foodClick(foodid) {
				this.$router.push({
					name: 'FoodDetail',
					params: {
						foodid: foodid,
					}
				});
			},
			carClick(foodid, foodname, foodprice) {
				//console.log(foodid,foodname,foodprice);
				this.dialogFormVisible = true;
				this.form.clickfoodname = foodname;
				this.form.clickfoodid = foodid;
				this.form.clickfooodprice = foodprice;
			},
			//购物车明细
			addfood() {
				this.dialogFormVisible = false;
				FoodCategoryService.addshoppingcartdetail({
					food_id: this.form.clickfoodid,
					food_amount: this.form.num,
					total_cost: this.form.clickfooodprice * this.form.num,
					detail_attach: `${this.form.radio1}${this.form.radio2}`
				}, r => {
					console.log(r.data);

				})
			},
			qrcode() {
				setTimeout(function() {
					let qrcode = new QRCode('qrcode', {
						width: 100,
						height: 100, // 高度
						text: '是微信小程序哦', // 二维码内容
						render: 'canvas', 
						background: '#f0f',
						foreground: '#ff0'
					});
				}, 500);
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../style/Common.less";

	.main {
		width: 100%;
		background-color: #f4f4f4;
	}

	.log {
		margin: 20px 20px 20px 60px;
		height: 100px;
		width: 100px;
	}

	//头部
	.div-head {
		height: 140px;
		width: calc(100% - 2px);
		background-color: #fdeaea;
		border: 1px solid #f5e2e2;
		box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
		border-radius: 4px;
	}

	//主体
	.main-content {
		width: 1200px;
		margin: 0 auto;
	}

	//头部搜索
	.div-head-content {
		display: flex;
		margin-left: 200px;

		.div-head-logo {}

		.div-head-search {
			position: relative;
			top: 48px;
			left: 100px;
			width: 700px;
		}

		.hot-search {
			position: relative;
			top: 8px;

			>span {
				margin-right: 5px;
				font-size: 16px;
				font-family: FangSong;

				&:hover {
					cursor: pointer;
					color: orangered;
				}
			}
		}
	}

	// logo图片 

	.kinddiv {
		align-items: center;
		width: 190px;
		background-color: #fdf4f4;
		//margin-right: 50px;
		//padding-top:10px;
		//margin: 0 auto;
		//background-color: lightblue;
	}

	//公告
	.main-content-announce {
		width: 210px;
		height: 290px;
		margin-left: 20px;
		padding: 10px;
		background-color: #fff;
		//border-radius: 4px;
		//border: 1px solid #f5e2e2;
		box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);

		//公告内容字体
		.announcediv {
			height: 40px;
			font-family: "Helvetica Neue";
			font-size: 14px;
			line-height: 16px;
			color: #606266; //字体颜色
			letter-spacing: 1px;

		}

		.announce_title_div {
			color: #ff2900;
			margin-bottom: 2px;
		}

		.announce_bottom {
			width: 100%;

			>a {
				color: #999;
				text-decoration: none;
			}

			>a:hover {
				color: #ff2900;
				text-decoration: none;
			}
		}

		.main-content-announce-imgdiv {
			height: 200px;
			width: 200px;

			>img {
				height: 100%;
				width: 100%;
			}
		}
	}

	.main-content-link {
		width: 210px;
		height: 170px;

		padding: 10px;
		margin-left: 20px;
		margin-top: 20px;

		background-color: #fff;
		//border: 1px solid #f5e2e2;
		box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
		border-radius: 5px;

		.mcl_link {
			margin: 5px 50px;

		}

		.mcl_title {
			margin: 0px 60px;
			font-family: "Helvetica Neue";
			font-size: 16px;
			line-height: 16px;
			color: #303133; //字体颜色
			letter-spacing: 1px;
		}

		.mcl_subs {
			margin: 10px 40px;
			font-family: "Helvetica Neue";
			font-size: 14px;
			line-height: 16px;
			color: #909299; //字体颜色
			letter-spacing: 1px;
		}

	}

	//上边主页面中间的控制
	.main-content-show {
		padding-top: 10px;
		width: 740px;
		height: 300px;


		//轮播图控制
		.main-content-carousel {
			width: 740px;
			height: 300px;

			&:hover {
				cursor: pointer;
			}
		}

		//轮播图下面的推荐菜品
		.main-content-exhibition {
			display: flex;
			justify-content: space-between;
			margin-top: 25px;

			//每一个推荐菜品
			.main-content-exhibition-item {
				width: 48%;
				height: 170px;
				border: 1px solid #f5e2e2;
				box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
				border-radius: 5px;
				display: flex;

				.main-content-exhibition-item-1 {
					flex: 1;

					.main-content-exhibition-item-1-1 {
						margin: 40px 0 15px 30px;

					}

					.main-content-exhibition-item-1-2 {
						margin: 0 0 15px 30px;
						font-family: "Helvetica Neue";

					}

					.main-content-exhibition-item-1-3 {
						margin: 0 0 20px 30px;
						height: 24px;
						width: 100px;
						border: 1px solid #ff2900;
						color: #ff2900;
					}
				}

				.main-content-exhibition-item-2 {
					flex: 1;
					margin-top: 8%;
				}

				&:hover {
					background-color: #fdeaea;
					cursor: pointer;
					transition: background-color 500ms;
				}
			}
		}

	}


	//菜品分类、轮播图
	.div-body {
		display: flex;
		margin-top: 20px;
		//margin-left: 20px;
		height: 520px;
		background-color: #fff;
		//background-color: #fdf4f4;
		//border: 1px solid #f5e2e2;
		box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;


	}

	.main-content-nav-container {
		width: 100%;
		height: 44px;
		line-height: 44px;
		box-sizing: border-box;
		font-size: 14px;
		color: #fff;
		margin-top: 30px;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		background: linear-gradient(to right, rgb(108, 182, 221) 2%, rgb(84, 193, 205) 97%) rgb(108, 182, 221);

		.title {
			font-size: 18px;
			margin-left: 13px;
			margin-right: 10px;
		}
	}

	.main-content-foods-container {
		flex-wrap: wrap;
		margin-bottom: 10px;
		display: flex;
		width: 100%;
		background-color: #fdf4f4;
		box-sizing: border-box;
		border: 1px solid #f5e2e2;

	}

	.el-select .el-input {
		width: 100px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-carousel__indicators--outside {}

	.footer {
		margin-top: 10px;

	}

	.food {
		margin: 8.7px;
		width: 252px;
		height: 240px;
		border-radius: 4px;
		padding: 15px 15px 0;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);

		&:hover {
			background-color: #fdeaea;
			cursor: pointer;
			transition: background-color 500ms;
		}
	}

	.hr {
		border-bottom: 1px solid #e6e6e6;
		height: 0;
		margin: 2px 5px;
	}

	.imgdiv {
		width: 100%;
		height: 170px;

		>img {
			width: 100%;
			height: 100%;
		}
	}

	.namediv {
		margin: 10px 20px 4px;
		//font-size: 16px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-family: "Helvetica Neue";
		font-size: 16px;
		line-height: 20px;
		color: #606266; //字体颜色
		letter-spacing: 1px;
	}

	.price-box {
		font-family: "Helvetica Neue";
		font-size: 18px;
		line-height: 20px;
		letter-spacing: 1px;
		color: #ff6600;

	}

	.numfont {
		font-size: 21px;
		letter-spacing: -0.5px;
	}

	.paydiv {
		display: flex;
		justify-content: space-between;
		margin: 0 20px 20px;
	}

	.flex_1 {
		flex: 1;
	}

	//zzg add
	.category-list {
		background-color: #fdf4f4;
		flex: 1;
		margin-right: 10px;
	}

	.home_main_notice {
		display: flex;
		flex-direction: column;
	}
</style>
